<template>
    <Category :disabled="showState===0"/>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top: 30px">
        <SpuList v-if="showState===0" @setState="setState"/>
        <SpuForm v-if="showState===1" :spuInfo="spuInfo" @setState="setState"/>
        <SkuForm v-if="showState===2" :spuInfo="spuInfo" @setState="setState"/>
    </el-card>
    
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Spu",
});
</script>

<script setup lang="ts">
    import SpuList from './components/SpuList/index.vue'
    import SpuForm from './components/SpuForm/index.vue'
    import SkuForm from './components/SkuForm/index.vue'
    import {ref} from 'vue'
    import useAttrStore from '@/stores/attr'
    import {storeToRefs} from 'pinia'
    import type { reqSpuInfoType } from '@/api/spu';
    
    const attrStore = useAttrStore()
    const {category3Id} = storeToRefs(attrStore)
    //定义一个值控制组件展示
    const showState = ref(0)
    //定义一个spu
    const spuInfo = ref<reqSpuInfoType>({
        category3Id: category3Id.value,
        description: '',
        spuImageList: [],
        tmId:null,
        spuName: '',
        spuSaleAttrList: []
    })
    //自定义事件，改变showState
    const setState = (state:number,row?:reqSpuInfoType) => {
        if(row){
            spuInfo.value = row
        }else{
            spuInfo.value = {
                category3Id: category3Id.value,
                description: '',
                spuImageList: [],
                tmId:null,
                spuName: '',
                spuSaleAttrList: []
            }
        }
        showState.value = state
    }
</script>